<template>
  <div class="container" >
    <div class="search_box" >
      <span class="search_btn" @click='toggle()' ref='btnDom'>{{ text }}</span>
      <span class="search_text" ref='dom' >首期我们采用了“敦煌主题”，结合央视2022年重点频道及社交类精品节目片单，期我们采用了“敦煌主题”，结合央视20</span>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'
export default {
  name: 'TopCategory',
  setup () {
    const dom = ref(null)
    const btnDom = ref(null)
    const text = ref('剪贴板：')
    const toggle = () => {
      if (dom.value.style.width !== '600px') {
        dom.value.style.width = '600px'
        text.value = '收起'
      } else {
        dom.value.style.width = 0
        text.value = '剪贴板：'
      }
    }
    return { toggle, dom, btnDom, text }
  }
}
</script>

<style scoped>
.container {
  width: 800px;
  height: 500px;
  border: 1px solid blue;
}
.search_box {
  /* 绝对定位，元素水平垂直居中 */
  position: absolute;
  top: 100px;
  left: 50px;
  /* transform:translate(-50%,-50%); */
  /* 设置背景颜色 */
  background-color: #8b96a3;
  /* 设置图标默认状态下大小，圆形 */
  height: 40px;
  padding: 0 20px;
  /* 设置圆角 */
  border-radius: 20px;
}
.search_text {
  /* 文字过多省略 */
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  width: 0;
  /* 清除默认样式 */
  border: none;
  background: none;
  outline: none;
  float: left;
  padding: 0;
  color: #fff;
  /* 设置文字样式 */
  font-size: 16px;
  line-height: 40px;
  /* 动画过渡 */
  transition: 0.5s;
}
/* 先设置默认状态，40px 的黑色圆形搜索框，中心为外网导入的红色 search 图标； */
.search_btn{
    color:#e84118;
    float:right;
    /* 设置默认状态下搜索框样式 */
    width:60px;
    height:40px;
    /* 圆角 */
    border-radius:20px;
    background-color:#8b96a3;
    /* 弹性布局，水平垂直居中 */
    display:flex;
    justify-content:center;
    align-items:center;
    cursor:pointer;
    /* 动画过渡 */
    transition:0.5s;
}
/* 当鼠标移入时，触发动画效果，动画过渡为 0.5s，搜索框展开至 200px，
并使搜索图标颜色变换；鼠标移出时，搜索框恢复默认状态。 */

/* 鼠标移入时，触发效果，搜索框展开 */
/* .search_box:hover .search_text {
  width: 600px;
  padding: 0;
}  */
</style>
